import { useState, useEffect } from 'react';

export default function DateTimeDisplay() {
  const [dateTime, setDateTime] = useState(new Date());
  
  useEffect(() => {
    const timer = setInterval(() => {
      setDateTime(new Date());
    }, 60000);
    
    return () => clearInterval(timer);
  }, []);
  
  const formattedDate = dateTime.toLocaleDateString('zh-CN', {
    weekday: 'long',
    month: 'long',
    day: 'numeric'
  });
  
  const formattedTime = dateTime.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  });
  
  return (
    <div className="text-center mb-8">
      <div className="text-4xl font-light text-gray-100 dark:text-gray-900">{formattedTime}</div>
      <div className="text-gray-500 dark:text-gray-400 mt-1">{formattedDate}</div>
    </div>
  );
}